
<html>
    <head>
        
    <link href="index.css" rel="stylesheet" type="text/css" />    
    </head>
    <body>
        <div id ="up">Raytracing</div>
        <div id="bottom">
            <div id="left">
                <canvas id="frame" width="500" height="500" style="border:1px solid"></canvas>
            </div>
            <div id="right">
                <form name="config" onsubmit="return false;">
                    Render Config
                    <div id="render">
                        Canvas Size: <br />
                        X: <input name="xres" type="text" value="500" size="3"></input>
                        Y: <input name="yres" type="text" value="500" size="3"></input><br/>
                        <input type="submit" name="chsize" value="Change Canvas Size" onclick="onSizeChange()"/><br /><br />
                        Render Resolution: <br />
                        X: <input type="text" name="rend_xres" onkeyup="changeTraceResolution()" value="1" size="3"/>
                        Y: <input type="text" size="3" name="rend_yres" onkeyup="changeTraceResolution()" value="1"/><br /><br />
                        
                    	Tracing Depth: <br />
                        <input type="text" name="traceDepth" onkeyup="changeTraceDepth()" value="3" size="1"/><br />
                        
                        <div id="light">
                            Lighting Options: <br />
                            <input type="checkbox" name="ambient" value="1" onchange="changeLighting()" checked="true">Ambient Light</input><br />
                            <input type="checkbox" name="diffuse" value="1" onchange="changeLighting()" checked="true">Diffuse Light</input><br />
                            <input type="checkbox" name="specular" value="1" onchange="changeLighting()" checked="true">Specular Light</input><br />
                        </div><br/>
                        <div id="antia">
                            Anti Aliasing Options: <br />
                            Super Sampling AA: <input type="text" size="1" name="supersampling" onkeyup="changeAntiAliasing()" value="1"/><br />
                            Multipass AA:<input type="checkbox" name="multipass" value="1" onchange="changeAntiAliasing()" ></input><br />
                        </div>
                        <input type="submit" name="render" value="Start Render" onclick="startRender()"/><br />
                    </div>
                    
                        <div id="FilterTitle">Filter Config<div/>
                    <div id="post">
                        Box Filter Options: <br />
                        <input type="radio" name="box" value="0" checked="true" onchange="changeFilter(this)">None</input><br />
                        <input type="radio" name="box" value="1" onchange="changeFilter(this)">Smoothing</input><br />
                        <input type="radio" name="box" value="2" onchange="changeFilter(this)">Sharpening</input><br />
                        <input type="radio" name="box" value="3" onchange="changeFilter(this)">Motion Blur</input><br />
                        <input type="radio" name="box" value="4" onchange="changeFilter(this)">Raised</input><br />
                        <input type="radio" name="box" value="5" onchange="changeFilter(this)">Edge Detection</input><br />
                        <input type="radio" name="box" value="6" onchange="changeFilter(this)">Antialiasing</input><br />
                        <input type="submit" value="Post Process" onclick="post_process()" /><br />
                    </div>
                    
                </form>
            </div>
        </div>
        <script src="global.js"></script>
        <script src="prototype.js"></script>
        <script src="matrix.js"></script>
        <script src="display.js"></script>
        <script src="raytracing.js"></script>
        <script src="filter.js"></script>
        <script src="texture.js"></script>
        <script src="render.js"></script>
        <script src="ui.js"></script>
    </body>
</html>
